<template>
    <div class="menu">
        <el-radio-group v-model="isCollapse" class="radio-group">
            <el-radio-button :label="true">收起</el-radio-button>
            <el-radio-button :label="false">展开</el-radio-button>
        </el-radio-group>
        <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
            @close="handleClose">
            <el-sub-menu :index="first.value" v-for="first in folderOptions" @click="choseFirst(first)">
                <template #title>
                    <el-icon>
                        <Folder />
                    </el-icon>
                    <span>{{ first.label }}</span>
                </template>
                <el-sub-menu :index="second.value" v-for="second in first.children" @click.stop="choseSecond(second)">
                    <template #title>
                        <el-icon>
                            <Folder />
                        </el-icon>
                        <span>{{ second.label }}</span>
                    </template>
                    <el-menu-item-group v-if="second.children" v-for="third in second.children">
                        <template #title><span v-if="!second">暂无文件夹</span></template>
                        <div @click.stop="showContent(third)">
                            <el-menu-item :index="third.value">{{ third.label }}
                            </el-menu-item>
                        </div>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { get } from "@/tools/api/api";
import { folderType, chosedFolderType } from "./folder";
import { Folder } from '@element-plus/icons-vue'
const instance = getCurrentInstance()
onMounted(() => {
    getFavorite()
})


instance?.proxy?.$Bus.on("reload", () => {
    getFavorite();
})
// 将选中的文件夹信息派发给父组件
const emit = defineEmits(['sendChosedFolder'])

//选择的第一层文件夹
const choseFirst = (first: folderType) => {
    chosedFolder.name = first.label;
    chosedFolder.value = first.value;
    chosedFolder.type = first.type;
    emit('sendChosedFolder', chosedFolder)
}

//选择的第二层文件夹
const choseSecond = (second: folderType) => {
    chosedFolder.name = second.label;
    chosedFolder.value = second.value;
    chosedFolder.type = second.type;
    emit('sendChosedFolder', chosedFolder)
}

/**
 * 选择的第三层文件夹
 */

const showContent = (third: folderType) => {
    chosedFolder.name = third.label;
    chosedFolder.value = third.value;
    chosedFolder.type = third.type;
    // 将小收藏夹value传递给兄弟组件
    emit('sendChosedFolder', chosedFolder)
    instance?.proxy?.$Bus.emit("choseFavorite", third.value)
}

/**
 * 暴露给父组件的数据
 */
const chosedFolder = reactive<chosedFolderType>({
    name: "",
    value: "",
    type: ''
})
defineExpose({
    chosedFolder
})

/**
 * 获取收藏夹
 */
const folderOptions = ref(<folderType[]>[])
const getFavorite = () => {
    get("getFavorite").then((res: any) => {
  
        if (res.code === 100) {
            folderOptions.value = res.data
        }
    })
}

/**
 * 打开/收起  大收藏夹
 */
const handleOpen = (key: string, keyPath: string[]): void => {
  
}
const handleClose = (key: string, keyPath: string[]): void => {
  
}

// 展开 收起标志位
const isCollapse = ref(false)

</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: $item-width*2;
    min-height: $item-height*6;
}

.menu {
    width: $item-width*2;

    .radio-group {
        display: flex;
        flex-wrap: nowrap;
        margin-bottom: 0.1rem;
    }
}
</style>
